<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;

        // Origin point on canvas
        const Ox = 80;
        const Oy = 70;

        // Arrow drawing helper function
        function drawArrow(fromX, fromY, toX, toY, size = 10) {
            const angle = Math.atan2(toY - fromY, toX - fromX);
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - size * Math.cos(angle - Math.PI / 6), toY - size * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - size * Math.cos(angle + Math.PI / 6), toY - size * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // 1. Draw Coordinate Axes
        const axisLengthX = 380;
        const axisLengthY = 320;
        drawArrow(Ox, Oy, Ox + axisLengthX, Oy); // X-axis
        drawArrow(Ox, Oy, Ox, Oy + axisLengthY); // Y-axis

        // 2. Draw Axis Labels
        ctx.font = "italic 24px 'Times New Roman'";
        ctx.fillText('O', Ox - 30, Oy + 10);
        ctx.fillText('x', Ox + axisLengthX + 15, Oy + 8);
        ctx.fillText('y', Ox - 8, Oy + axisLengthY + 25);

        // 3. Draw Bucket
        const bucketWidth = 50;
        const bucketHeight = 40;
        ctx.lineWidth = 1.5;
        // The bucket's bottom-left corner is at the origin O.
        // The rectangle is drawn from (Ox, Oy-bucketHeight) to (Ox+bucketWidth, Oy).
        ctx.beginPath();
        ctx.rect(Ox, Oy - bucketHeight, bucketWidth, bucketHeight);
        ctx.stroke();
        
        // Draw the extra line near the bottom to represent the base plate, as seen in the diagram
        ctx.beginPath();
        const bottomPlateThickness = 4;
        ctx.moveTo(Ox, Oy - bottomPlateThickness);
        ctx.lineTo(Ox + bucketWidth, Oy - bottomPlateThickness);
        ctx.stroke();

        // 4. Draw Water in the bucket
        const waterLevelY = Oy - bucketHeight * 0.5;
        ctx.beginPath();
        // Main water level line
        ctx.moveTo(Ox, waterLevelY);
        ctx.lineTo(Ox + bucketWidth, waterLevelY);
        // Little dashes to indicate liquid surface
        ctx.moveTo(Ox + 5, waterLevelY + 4);
        ctx.lineTo(Ox + 20, waterLevelY + 4);
        ctx.moveTo(Ox + 28, waterLevelY + 7);
        ctx.lineTo(Ox + 45, waterLevelY + 7);
        ctx.stroke();

        ctx.lineWidth = 2; // Reset line width for subsequent drawings

        // 5. Draw "t = 0" Label
        ctx.font = "italic 22px 'Times New Roman'";
        ctx.fillText('t = 0', Ox, Oy - bucketHeight - 15);

        // 6. Draw Acceleration a₀ arrow
        const a0ArrowY = Oy - bucketHeight / 2;
        const a0ArrowStartX = Ox + bucketWidth + 20;
        const a0ArrowEndX = a0ArrowStartX + 80;
        drawArrow(a0ArrowStartX, a0ArrowY, a0ArrowEndX, a0ArrowY);
        
        // Label for a₀, with subscript
        ctx.font = "italic 24px 'Times New Roman'";
        ctx.fillText('a', a0ArrowEndX + 10, a0ArrowY + 8);
        ctx.font = "italic 16px 'Times New Roman'";
        ctx.fillText('0', a0ArrowEndX + 24, a0ArrowY + 12);

        // 7. Draw Gravity g arrow
        const gArrowX = Ox + 180;
        const gArrowStartY = Oy + 100;
        const gArrowEndY = gArrowStartY + 60;
        drawArrow(gArrowX, gArrowStartY, gArrowX, gArrowEndY);

        // Label for g
        ctx.font = "italic bold 26px 'Times New Roman'";
        ctx.fillText('g', gArrowX + 15, gArrowStartY + 35);
    </script>
</body>
</html>